<template>
  <div class="product_mian">
    <!-- 轮播图 -->
    <carousel :listshuju="lunbotu_list"></carousel>
    <div class="cuxiao_main">
      <product-list :listshuju="putonggoods_list"></product-list>
    </div>
    <foo-ter></foo-ter>
  </div>
</template>

<script type="text/javascript">
  import footer from "../footer/index.vue";
  import carousel from "../Carousel/Carousel.vue";
  import productlist from "./productlist.vue";
export default {
  name: 'cuxiao',
  data () {
    return {
      putonggoods_list:[],
      lunbotu_list:[],
    }
  },
  created:function(){
    let conent = this;
    let _url = "/index.php?g=app&m=shopping&a=putonggoods_list_post",
    _luotu = "/index.php?g=app&m=shopping&a=lunbotu_list_post";
    conent.$http.post(_url).then(function(data){
        if(data.data.status== "1"){
          conent.putonggoods_list =data.data.data.putonggoods_list;
        }
    },function(response){
        conent.$toast(response.data);
    });
    conent.$http.post(_luotu,{title:"精品专区"}).then(function(data){
        if(data.data.status== "1"){
          conent.lunbotu_list =data.data.data.lunbotu_list;
        }
    },function(response){
        conent.$toast(response.data);
    })
  },
  components:{
    'foo-ter':footer,
    'carousel':carousel,
    'product-list':productlist
  }
}
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.cuciao_banner{
  width: 100vw;
  height: 55.33vw;
  .banner_img{
    display: inline-block;
    width: 100vw;
    height: 55.33vw;
  }
}
.product_mian{
  width: 100vw;
  height: 100vh;
}
.cuxiao_tab{
  width: 100vw;
  height: 12vw;
  .cuxiao_tab_main{
    width: 100%;
    height: 12vw;
    color: @color1;
    overflow: hidden;
    zoom:1;
    li{
      width: 33.3333%;
      display: inline-block;
      float: left;
      height: 12vw;
      line-height: 12vw;
      background-color: @color;
    }
    .danjian{
      background-color: @color6;
    }
  }
}
</style>